import React, { useState } from 'react'
import {
  NavBar, Form, Tag, Input,
  Button, List, Dialog, NoticeBar, Checkbox, Modal
} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.css'
import request from '../../api/request'
import { userlist } from '../../store/userlist'
import { useSelector, useDispatch } from 'react-redux'
import { FileOutline, DeleteOutline } from 'antd-mobile-icons'
import { detilpepo, addpepo, editpope } from '../../store/userlist'
function Xzcpeope() {
  let navgetion = useNavigate()
  const [form] = Form.useForm()
  const { userpope } = useSelector(state => state.userlist)
  const dispatch = useDispatch()
  const [visible, setVisible] = useState(false)
  const [disvisible, setDisVisible] = useState(false)
  // 编辑
  const edipoo = (item) => {
    setVisible(true)
    setDisVisible(false)
    form.setFieldsValue(item)


  }
  // 删除

  const delpoo = async (item) => {
    const res = await Dialog.confirm({
      content: '确定要删除吗',
    })
    if (res) {
      dispatch(detilpepo(item))
    }
    else {
      console.log('取消删除');

    }
  }
  // 新增
  const addlist = () => {
    setVisible(true)
    setDisVisible(true)
    form.resetFields()

  }

  const onFinish = () => {
    if (disvisible) {
      const addobj = { ...form.getFieldsValue(), id: Date.now(), state: false }
      dispatch(addpepo(addobj))
    }
    else {
      const editobj = form.getFieldsValue(true)
      dispatch(editpope(editobj))
    }
    setVisible(false)
    form.resetFields()
  }


  return (
    <div>
      <NavBar onBack={() => navgetion(-1)}>标题</NavBar>
      <NoticeBar content='我是孙璐瑶我要努力学习要努力,相信自己是可以的加油' color='alert' />
      <Button color='primary' size='middle' className={styles.chrlist} onClick={() => addlist()} >
        点击新增乘车人
      </Button>
      <div>
        <List header='基础用法'>

          {
            userpope.map((item, index) => {
              return <List.Item key={index} description={item.code}
                prefix={<FileOutline onClick={() => edipoo(item)} />}
                extra={
                  <div>
                    <DeleteOutline onClick={() => delpoo(item)} />
                    <div
                      onClick={() => {
                        console.log('点击了')
                      }}
                    >
                      <Checkbox />
                    </div>
                  </div>
                }

              >{item.name}</List.Item>
            })
          }


        </List>

      </div>
      <div>
        <Modal
          visible={visible}
          content={
            <Form
              layout='horizontal'
              onFinish={onFinish}
              form={form}
              footer={
                <Button block type='submit' color='primary' size='large'>
                  提交
                </Button>
              }
            >
              <Form.Header>{disvisible ? '添加' : '编辑'}</Form.Header>
              <Form.Item
                name='name'
                label='姓名'
                rules={[{ required: true, message: '姓名不能为空' }]}
              >
                <Input onChange={console.log} placeholder='请输入姓名' />
              </Form.Item>
              <Form.Item
                name='code'
                label='身份证'
                rules={[{ required: true, message: '身份证不能为空' }]}
              >
                <Input onChange={console.log} placeholder='请输入身份证' />
              </Form.Item>
            </Form>
          }
          closeOnAction
          onClose={() => {
            setVisible(false)
          }}

        />
      </div>

    </div>
  )
}

export default Xzcpeope
